<!DOCTYPE html>
<html lang="en">
<head th:include="cultivateWeb/header :: culHeaderCss"></head>
<!--<link rel="stylesheet" href="/css/layui.css" >-->
<body>
<!-- 顶部导航 -->

<!-- navbanner begin-->
<header th:include="cultivateWeb/header :: header"></header>
<style>
    a {
        cursor: pointer
    }
</style>
<div class="layui-container">
    <p style="line-height: 40px">当前位置：<a href="/cultivate/homepage">首页</a> > 培训课程</p>
</div>
<section>
    <div class="layui-container bt50">
        <!-- 筛选 -->
        <div class="filter bt50">
            <div class="list-item clearfix">
                <div class="list-title">证书</div>
                <ul class="list-ul" id="categoryList">
                </ul>
                <input type="hidden" value="" id="category">
            </div>
        </div>
    </div>
    <!-- 全部课程 -------------------------------------------------------------- -->
    <div class="layui-container bt50">
        <input type="hidden" id="name" th:value="${name}"/>
        <div class="title">
            全部课程
        </div>
        <div class="rmtjkc aa">
            <div class="xianshi">
                <div class="qiehuan active">
                    <ul class="clear" id="course">
                    </ul>
                </div>
                <div id="page" class="page"></div>
            </div>
        </div>
    </div>
</section>
<!-- footer ------------------------------------------------------- -->
<div class="footer" th:include="cultivateWeb/header :: footer">
</div>
<script type="text/javascript" src="/js/xlPaging.js"></script>
<style>
    .nm{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
<script>
    $(function () {
        //证书数据
        selProfileFill();
        //课程数据
        getCourse($("#name").val(), "")

    });

    function getCourse(name, profileId) {
        $.ajax({
            url: "/jzApi/courses/selCourseList",
            type: 'GET',
            data: {
                name: name,
                profileId: profileId,
                current: 1,
                number: 16
            },
            success: function (res) {
                if (res.data.pages == 0) {
                    $("#course").html('<div class="noData" style="font-size: 16px">暂无数据</div>');
                } else {
                    var list = res.data.records;
                    var course = '';
                    list.forEach(function (item, index) {
                        var a = '', b = '';
                        if (item.specialPrice != 0) {
                            a = '¥' + item.specialPrice
                        } else {
                            a = '免费'
                        }
                        if (item.type == 0) {
                            b = '<span class="abSpan orangeSpan">证书课程</span>'
                        } else if(item.type == 1) {
                            b = '<span class="abSpan greenSpan">师资培训课程</span>'
                        } else if(item.type == 2) {
                            b = '<span class="abSpan greenSpan">考评员培训课程</span>'
                        } else if(item.type == 3) {
                            b = '<span class="abSpan greenSpan">高级师资培训课程</span>'
                        } else if(item.type == 4) {
                            b = '<span class="abSpan greenSpan">高级考评员培训课程</span>'
                        }
                        course += '<li><a href="/couInfo/couInfo?id=' + item.id + '">' +
                            '<div style="position: relative"><img src="' + item.thumbnail + '" alt="图片">' + b + '</div>' +
                            '<div>' +
                            '<h1 class="nm">' + item.name + '</h1>' +
                            '<h2>' +
                            '<span class="red lf">' + a + '</span>' +
                            '<span class="rt" style="color: #666">讲师：' + item.teacherName + '</span>' +
                            '</h2>' +
                            '</div>' +
                            '</a></li>'
                    });
                    $("#course").html(course);
                    page(1, res.data.pages, name, profileId);
                }
            }
        });
    }

    function selProfileFill() {
        $.ajax({
            url: "/jzApi/certificates/selProfileFill",
            type: 'GET',
            data: {},
            success: function (res) {
                if (res.data == 0) {
                    $("#categoryList").html('<div class="noData">暂无数据</div>');
                } else {
                    var list = res.data;
                    var categoryList = '<li><a class="list-this" onclick="getCourse(\'' + "" + '\',' + '\'' + "" + '\')">全部</a></li>';
                    list.forEach(function (item, index) {
                        categoryList += '<li><a class="list" onclick="getCourse(\''
                            + "" + '\',' + '\''
                            + item.id + '\')">' + item.name + '</a></li>'
                    });
                    $("#categoryList").html(categoryList);
                }
            }
        });
    }

    $("#categoryList").on("click", ".list", function (res) {
        $(this).addClass("list-this");
        $(this).parent("li").siblings().find("a").removeClass("list-this")
        // console.log("222",$(this).addClass(list-this))
    });

    function page(num, tolPages, name, profileId) {
        $("#page").paging({
            nowPage: Number(num), // 当前页码
            pageNum: Number(tolPages), // 总页码
            buttonNum: 10, //要展示的页码数量
            canJump: 1,// 是否能跳转。0=不显示（默认），1=显示
            showOne: 1,//只有一页时，是否显示。0=不显示,1=显示（默认）
            callback: function (num) { //回调函数
                $.ajax({
                    url: "/jzApi/courses/selCourseList",
                    type: 'GET',
                    data: {
                        name: name,
                        profileId: profileId,
                        current: 1,
                        number: 16
                    },
                    success: function (res) {
                        var list = res.data.records;
                        var news = '';
                        list.forEach(function (item, index) {
                            var a = '', b = '';
                            if (item.specialPrice != 0) {
                                a = '¥' + item.specialPrice
                            } else {
                                a = '免费'
                            }
                            if (item.type == 0) {
                                b = '<span class="abSpan orangeSpan">证书课程</span>'
                            } else if(item.type == 1) {
                                b = '<span class="abSpan greenSpan">师资培训课程</span>'
                            } else if(item.type == 2) {
                                b = '<span class="abSpan greenSpan">考评员培训课程</span>'
                            } else if(item.type == 3) {
                                b = '<span class="abSpan greenSpan">高级师资培训课程</span>'
                            } else if(item.type == 4) {
                                b = '<span class="abSpan greenSpan">高级考评员培训课程</span>'
                            }
                            if (item.thumbnail != '' && item.thumbnail != null) {
                                a = '<img style="width: 180px;height: 110px" src="' + item.thumbnail + '" />'
                            } else {
                                a = '<div class="bg_green">' + name + '</div>'
                            }
                            news += '<li><a href="/couInfo/couInfo?id="' + item.id + '>' +
                                '<div style="position: relative"><img src="' + item.thumbnail + '" alt="图片">' + b + '</div>' +
                                '<div>' +
                                '<h1 class="nm">' + item.name + '</h1>' +
                                '<h2>' +
                                '<span class="red lf">' + a + '</span>' +
                                '<span class="rt" style="color: #666">讲师：' + item.teacherName + '</span>' +
                                '</h2>' +
                                '</div>' +
                                '</a></li>'
                        });
                        news += '<div style="clear: both"></div>';
                    }
                });
            }
        });
    }
</script>

</body>
</html>